<template>
	<div>
		<div class="home_head">
			<div class="location">
				<van-icon name="location-o" @click="showal = true" />&nbsp;&nbsp;
				<span class="location">{{ $store.state.locationName || '正在定位...'}}</span>&nbsp;&nbsp;
				<van-icon name="arrow-down" />
			</div>
			<van-sticky :offset-top="0">
				<van-search background="#008EFF" v-model.trim="keywords" placeholder="搜索饿了么商家、商品名称" @input="search_poi_nearby_alipay" />
			</van-sticky>
		</div>

			<van-cell-group id="van-cell-group">
				<van-cell v-for="( item,i) in searchLocationList " @click="selectArea(i)" :key="i" :title="item.name " icon="location-o"
				 :label="item.short_address" :value="item.distance" />
			</van-cell-group>
			
			
			<div class="areaList" v-if="showal">
				<van-overlay :show="showal" z-index="2">
					<van-area id="van-picker" :area-list="area" :loading="loading" @cancel="showal=false" @confirm="chooseCity" />
				</van-overlay>
			</div>


		<div v-show="$store.state.locationReady">

			<!-- Entry -->
			<van-swipe indicator-color="black" :autoplay="0" :show-indicators="false">
				<van-swipe-item v-for="(item , i) in needEntries" :key="i">
					<van-grid square :column-num="5" icon-size="40" class="foodentrt">
						<van-grid-item v-for="value in item" :key="value.position">
							<!-- https://cube.elemecdn.com/7/31/111f3f9379e772eedf4855beae8a1jpeg -->
							<img :src="value.image_hash | iconFilter" />
							<span>{{value.name}}</span>
						</van-grid-item>
					</van-grid>
				</van-swipe-item>
			</van-swipe>
			<br>
			<van-row type="flex" justify="center">
				<van-col span="1">
					<span>--</span>
				</van-col>
				<van-col span="5" style="text-align: center;">
					<span>商家推荐</span>
				</van-col>
				<van-col span="1">
					<span>--</span>
				</van-col>
			</van-row>
			<br>

			<div class="resturants_container">
				<Restaurant></Restaurant>
				<van-loading size="40px" style=" text-align: center ;">加载中...</van-loading>
			</div>
			<div style="height: 50px;"></div>
		</div>

		<div v-show="!$store.state.locationReady">
			<van-image
			  width="100%"
			  height="100%"
			  :src="no_Address"
			/>
		</div>


	</div>

</template>

<script>
	import no_Address from "../assets/images/no-address.gif"
	import area from "../data/area.js"
	import axios from "axios"
	import Restaurant from '../components/Restaurant.vue'
	export default {
		components: {
			Restaurant
		},
		data() {
			return {
				no_Address,
				cityName: "",
				showal: false,
				area,
				loading: false,
				entries: [],
				needEntries: [],
				rate: 1,
				restaurantsinfos: [],
				isLoading: false,
				//根据关键字搜索的位置位置列表
				searchLocationList: [],
				//输入框输入的关键词
				keywords: ""
			}
		},
		created() {

			//轮播图入口列表
			// axios.get(`/ele/restapi/shopping/v2/entries?latitude=${{ latitude }}&longitude=${{ longitude }}&templates[]=main_template&templates[]=favourable_template&templates[]=svip_template&terminal=h5`)
			axios.get(
					`/ele/restapi/shopping/v2/entries?latitude=34.72893&longitude=113.752807&templates[]=main_template&templates[]=favourable_template&templates[]=svip_template&terminal=h5`
				)
				.then(res => {
					// res.data[0].entries.forEach(item=>{

					// 	item.image_hash = processImgUrl(item.image_hash)
					// })
					this.entries = res.data[0].entries
					var arr1 = this.entries.slice(0, 10)
					var arr2 = this.entries.slice(10, this.entries.length)
					this.needEntries.push(arr1)
					this.needEntries.push(arr2)
				})

		},
		watch:{
			entries(value){
				//界面更新立即swipwers
				this.$nextTick(() => {
						var arr1 = value.slice(0, 10)
						var arr2 = value.slice(10, value.length)
						this.needEntries.push(arr1)
						this.needEntries.push(arr2)	
						
				})
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll, true);
		},
		methods: {
			//点击搜索出来的地址单元
			selectArea(i) {
				// latitude  longitude
				var lat = this.searchLocationList[i].latitude
				var lng = this.searchLocationList[i].longitude
				this.$store.dispatch("saveCurrentLocalInfo", {
					lat,
					lng
				})
				this.searchLocationList = []
				this.keywords = ""

				var position = this.$store.state.position
				var restaurantReqTimes = 0
				this.$store.dispatch("getResturantList", {
						position: position,
						times: restaurantReqTimes
					})
					.then(res => {
						//饭店
						console.log();
						this.restaruantsInfo = res.data.items //restaurants[]数组
						this.$store.state.restaurants.push(res.data.items)
						console.log(res.data.items);
					})
			},
			//关键词搜索附件商家
			search_poi_nearby_alipay() {
				var keywords = this.keywords
				if (keywords != "") {
					var position = this.$store.state.position
					this.$store.dispatch("search_poi_nearby_alipay", {
							keywords,
							position
						})
						.then(res => {
							this.searchLocationList.splice(0)
							this.searchLocationList.splice(0, 0, ...res.data)
						})
				} else {
					this.searchLocationList.splice(0)
				}

			},
			//选择城市后更新经纬度
			chooseCity(e) {
				this.cityName = e[1].name + e[2].name;
				this.$store.dispatch("getCoords", this.cityName)
				this.$store.state.locationReady =true
				//关闭arealist
				this.showal = false
				this.$store.state.restaurantReqTimes = 0
				

				
			},
			//页面滑动监听  加载更多
			handleScroll() {
				var body = document.documentElement
				var x = body.scrollHeight - body.clientHeight - body.scrollTop - 10;
				if (x < 0) {
					// console.log("请求店铺列表");
					if (this.isLoading == false) {
						this.isLoading = true
						setTimeout(() =>{
							this.$store.dispatch("getResturantList", {
									position: this.$store.state.position,
									times: this.$store.state.restaurantReqTimes
								})
								.then(res => {
									var len = this.$store.state.restaurants.length
									this.$store.state.restaurants.push(res.data.items)
									this.isLoading = false
									console.log("请求");
								})
						}, 1500);
					}
				}
			}
		},
	}
</script>

<style>
	* {
		margin: 0;
	}

	img {

		width: 80%;
	}

	.home_head {
		background-color: rgb(0, 146, 255);
		width: 100%;
		padding: 10px 10px 0 10px;
		color: white;
	}

	.location {
		padding: 0.5rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 200px;
	}

	.search-input {
		position: relative;
	}

	.search_mask {
		position: absolute;
		height: 59px;
		background-color: rgb(0, 146, 255);
	}

	.foodentrt span {
		display: block;
		margin-top: 1.333333vw;
		color: #666;
		font-size: .8rem;
	}

	.resturants_container {
		padding: 10px;
	}

	#van-picker {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	#van-cell-group {

		position: absolute;
		z-index: 2;
		width: 100%;
	}
</style>
